隨著網(wǎng)絡(luò)發(fā)展的不斷前進(jìn)，人們?cè)絹?lái)越多地借助網(wǎng)絡(luò)獲取信息，越來(lái)越多的人及公司對(duì)網(wǎng)站的要求也越來(lái)越高，作為用戶及訪客來(lái)說(shuō)，簡(jiǎn)介容易，易用，且具有一定實(shí)用性的網(wǎng)頁(yè)是最滿足他們需求的。本文將結(jié)合一些網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)知識(shí)，希望能幫助初學(xué)者們打造出一個(gè)完美的網(wǎng)頁(yè)。

　　一、網(wǎng)頁(yè)的基礎(chǔ)架構(gòu)

　　1、網(wǎng)頁(yè)結(jié)構(gòu)

　　網(wǎng)頁(yè)文件的結(jié)構(gòu)是以HTML、CSS、JavaScript 3 種語(yǔ)言的組合構(gòu)成的整體結(jié)構(gòu)，網(wǎng)頁(yè)分整體及局部，整體以2、3 層架構(gòu)排定層次關(guān)系，分上、中、下3 個(gè)層次，其中局部則以各自的模塊來(lái)組織內(nèi)容，單獨(dú)分析每一個(gè)模塊用途，尤其是當(dāng)前受歡迎的12 柵格界面，將以它們作為小構(gòu)架進(jìn)行多功能模塊的組合，用以組織內(nèi)容，表達(dá)更多的細(xì)節(jié)信息。

　　2、Web 設(shè)計(jì)基本原則

　　網(wǎng)頁(yè)設(shè)計(jì)應(yīng)遵循“Jakob Nielsen ”等知名專家的設(shè)計(jì)原則：首先，要學(xué)會(huì)分離內(nèi)容與表現(xiàn)，并能夠有效地探索內(nèi)容;其次，遵循用戶的直覺(jué)，以直覺(jué)性的方式呈現(xiàn)給用戶;同時(shí)，要及時(shí)接受新技術(shù)，使用最新的設(shè)計(jì)技術(shù)進(jìn)行轉(zhuǎn)換;最后要建立一致性，網(wǎng)頁(yè)要求界面簡(jiǎn)潔規(guī)范，便于用戶順利操作瀏覽。

　　3、標(biāo)準(zhǔn)組件使用

　　為保證網(wǎng)頁(yè)設(shè)計(jì)的成功，可以使用WCAG2.0、HTML、AJAX、Flash 等標(biāo)準(zhǔn)化的組件，這些標(biāo)準(zhǔn)組件優(yōu)化頁(yè)面的結(jié)構(gòu)，構(gòu)建數(shù)據(jù)傳輸結(jié)構(gòu)，降低訪問(wèn)時(shí)間;同時(shí)，可以利用組件庫(kù)和框架進(jìn)行統(tǒng)一管理，克服系統(tǒng)出錯(cuò)的可能，從而提高系統(tǒng)的安全性。

　　二、網(wǎng)頁(yè)布局設(shè)計(jì)

　　1、柵格布局

　　柵格布局是當(dāng)前流行的一種布局方式，網(wǎng)頁(yè)上的內(nèi)容以網(wǎng)格的形式排列，內(nèi)容之間的關(guān)系更為清楚。一般以12 柵格比較多見，內(nèi)容以要求重點(diǎn)進(jìn)行組織，如果是展示類網(wǎng)頁(yè)，可以加入輪播，讓用戶更加關(guān)注內(nèi)容，但也不要讓輪播的間隔太短，使用戶覺(jué)得不輕松，布局形式可以采用橫向布局或者豎向布局，當(dāng)然也可以是全屏情況下的單屏布局。

　　2、流式布局

　　流式布局是一種基于盒模型布局，以容器的形式進(jìn)行排列內(nèi)容，更便于網(wǎng)頁(yè)的排列，當(dāng)流式布局結(jié)合屬性設(shè)置，可以把一些不同屏幕的內(nèi)容擺放在同一頁(yè)面，也就是自適應(yīng)布局。此外，顏色、背景圖片也能在一定程度上改善網(wǎng)頁(yè)的視覺(jué)效果，為用戶提供更好的界面體驗(yàn)。

　　三、網(wǎng)頁(yè)交互設(shè)計(jì)

　　1、Web 2.0 交互設(shè)計(jì)

　　Web 2.0 交互設(shè)計(jì)是網(wǎng)頁(yè)設(shè)計(jì)的核心內(nèi)容，在設(shè)計(jì)中，交互設(shè)計(jì)的訴求在于提高網(wǎng)站的用戶體驗(yàn)，使用戶能夠快速、便捷地找到所需的信息。常見的交互設(shè)計(jì)手法是搜索功能、分類導(dǎo)航等，在頁(yè)面上設(shè)置更友好的導(dǎo)航及相關(guān)的搜索功能，可以更方便的定位相關(guān)文字和圖片，讓用戶輕松快捷的進(jìn)行網(wǎng)頁(yè)的瀏覽。

　　2、動(dòng)效應(yīng)用

　　動(dòng)效設(shè)計(jì)又稱為交互動(dòng)效，可以使網(wǎng)頁(yè)上的靜態(tài)內(nèi)容具備視覺(jué)動(dòng)效，如圖片翻轉(zhuǎn)、彈出、展開等，讓靜態(tài)圖片的形式為用戶帶來(lái)會(huì)心一笑的體驗(yàn);同時(shí)，動(dòng)效設(shè)計(jì)也會(huì)為網(wǎng)頁(yè)提供有趣的體驗(yàn);如果網(wǎng)站正在做一些活動(dòng)，動(dòng)效的應(yīng)用可以將活動(dòng)的整個(gè)過(guò)程在頁(yè)面上帶給用戶精彩的視覺(jué)體驗(yàn)。

　　本文介紹了一些關(guān)于網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)原則，以及關(guān)于網(wǎng)頁(yè)布局設(shè)計(jì)和網(wǎng)頁(yè)交互設(shè)計(jì)的應(yīng)用。要想在網(wǎng)頁(yè)設(shè)計(jì)中取得成功，不僅需要掌握基礎(chǔ)知識(shí)，更重要的是要配合設(shè)計(jì)原則，善于借助設(shè)計(jì)工具熟練使用標(biāo)準(zhǔn)組件和柵格布局，充分利用Web 2.0 交互設(shè)計(jì)和動(dòng)效設(shè)計(jì)，從而為用戶提供出一款完美的網(wǎng)頁(yè)體驗(yàn)。